@extends('layouts.app')

@section('content')
	{{--<div data-options="region:'center'"  class="easy_center">
		<div id="tt" class="easyui-tabs" style="width:100%;" data-options="border:false,fit:true,plain:true">
			<div title="首页"></div>
		</div>
	</div>--}}
	<div class="main-content">

		<div class="search_inp">
			<table width="100%" border="1" class="table_search">
				<thead>
					<tr>
						<th colspan="6">
							<span>查询条件</span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td width="10%" align="right"><label>单位名称：</label></td>
						<td width="10%"><input type="text" class="w150" name="unit_name" placeholder="请输入单位全名"/></td>
						<td width="10%" align="right"><label>上报时间：</label></td>
						<td width="10%"><input type="text" class="easyui-datebox w153" name="created_at" placeholder=""/></td>
                        <td width="10%" align="right"><label>上报人：</label></td>
                        <td width="10%"><input type="text" class="w150" name="sbren" placeholder="请输入上报人姓名"/></td>
					</tr>
                    <tr>
                        <td width="10%" align="right"><label>是否处理：</label></td>
                        <td width="10%">
                            <select name="police_cl" class="w150">
                                <option value="">请选择处理类型</option>
                                <option value="0">未处理</option>
                                <option value="1">已处理</option>
                            </select>
                        </td>
                        <td width="10%" align="right"><label>处理时长：</label></td>
                        <td width="10%">
                            <select name="chuli_time" class="w150">
                                <option value="">请选择处理时长</option>
                                <option value="1">小于1天</option>
                                <option value="2">1至3天</option>
                                <option value="3">3至7天</option>
                                <option value="4">7至15天</option>
                                <option value="5">大于15天</option>
                            </select>
                        </td>
                        <td></td>
                        <td width="20%">
                            <input type="hidden" name="map_id" value=""/>
                            <input type="hidden" name="city" value=""/>
                            <input type="hidden" name="area" value=""/>
                            <input type="hidden" name="org_id" value=""/>
                            <a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:56px" onclick="doSearch()">查询</a>
                            <a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart'" style="width:90px" id="tjt">查看统计图</a>
                        </td>
                    </tr>
				</tbody>
			</table>

		</div>

		<div class="btn-toolbar list-toolbar">
			<div class="form-all mg_t30">
				<table id="dg4" title="警情上报列表" class="easyui-datagrid" style="width:100%;height:600px;" toolbar="#tb3"
                    data-options="rownumbers:true, singleSelect:true,pagination:true,pageSize:20,url:'{{url('admin/safe/jqsb')}}',method:'get'">
	                <thead>
	                    <tr>
	                        <th data-options="field:'jqbt'" width="10%" align="center">标题</th>
							 <th data-options="field:'city_name'" width="5%" align="center">市</th>
							 <th data-options="field:'area_name'" width="10%" align="center">区</th>
							 <th data-options="field:'org_name'" width="10%" align="center">所属派出所</th>
	                        <th data-options="field:'unit_name'" width="20%" align="center">上报企业</th>
	                        <th data-options="field:'sbren'" width="5%"  align="center">上报人</th>
	                        <th data-options="field:'police_cl'" width="10%"  align="center">是否处理</th>
	                        <th data-options="field:'created_at'" width="10%" align="center">上报时间</th>
                            <th data-options="field:'update_at'" width="10%" align="center">处理时间</th>
                            <th data-options="field:'chuli_time'" width="11%" align="center">处理时长</th>
	                    </tr>
	                </thead>
            	</table>

            	 <!--如果处理了-->
	            <script type="text/javascript">
	                $('#dg4').datagrid({
	                    rowStyler:function(index,row){
	                        if (row.police_cl == '已处理'){
	                            return 'background-color:#BEFDA3;color: #0992f5;font-weight:bold;';
	                        }
	                    }
	                });
	            </script>
		  </div>
		</div>
	</div>

        <!-- 考核新增弹框 -->
        <div id="adbg" class="easyui-window" title="添加" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:1050px;height: auto;max-height:560px;padding:10px;">
       
        </div>

        <div id="dlg" class="easyui-dialog" title="删除" closed="true" style="width:400px;height:200px;line-height:100px;text-align:center;font-size:16px;padding:10px">
            您确定要删除该列表？
        </div>

    <style>
        .btns {
            padding-left: 20px;
            margin-bottom: 10px;
        }
        .mg_b20{
            margin-bottom: 20px;
        }
    </style>
    <div id="shili_tb1" class="easyui-window" closed="true">
        <h2 class="text-center mg_b20">警情上报数量统计</h2>
        <div class="btns">
            <button class="btn btn-default btn-sm" id="bzt">饼状图</button>
            <button class="btn btn-default btn-sm" id="zzt">柱状图</button>
            <button class="btn btn-default btn-sm" id="zxt">折线图</button>
        </div>
        <div id="zdbwshul" style="height:470px;width:600px;margin: 0 auto;"></div>
    </div>

    <script type="text/javascript">
        function doSearch(){
            $('#dg4').datagrid('load',{
                city: $("input[name='city']").val(),
                area: $("input[name='area']").val(),
                org_id: $("input[name='org_id']").val(),
                police_cl: $("select[name='police_cl']").val(),
                unit_name: $("input[name='unit_name']").val(),
                created_at: $("input[name='created_at']").val(),
                chuli_time: $("select[name='chuli_time']").val(),
                sbren: $("input[name='sbren']").val(),
            });
        }
        function load_city_data_from_menu($id){
            $('#dg4').datagrid('load',{
                city: $id,
            });
            $("input[name='city']").val($id);
            $("input[name='area']").val('');
            $("input[name='org_id']").val('');
            $("input[name='map_id']").val($id);

            $("input[name='unit_name']").val('');
            $("input[name='created_at']").val('');
            $("select[name='police_cl']").val('');
            $("select[name='chuli_time']").val('');
            $("input[name='sbren']").val('');
        }

        function load_area_data_from_menu($id){
            $('#dg4').datagrid('load',{
                area: $id,
            });
            $("input[name='city']").val('');
            $("input[name='area']").val($id);
            $("input[name='org_id']").val('');
            $("input[name='map_id']").val($id);

            $("input[name='unit_name']").val('');
            $("input[name='created_at']").val('');
            $("select[name='police_cl']").val('');
            $("select[name='chuli_time']").val('');
            $("input[name='sbren']").val('');
        }
        function load_org_data_from_menu($id){
            $('#dg4').datagrid('load',{
                org_id: $id,
            });
            $("input[name='city']").val('');
            $("input[name='area']").val('');
            $("input[name='org_id']").val($id);
            $("input[name='map_id']").val($id);

            $("input[name='unit_name']").val('');
            $("input[name='created_at']").val('');
            $("select[name='police_cl']").val('');
            $("select[name='chuli_time']").val('');
            $("input[name='sbren']").val('');
        }
    </script>

		<script type="text/javascript" src="{{ URL::asset('/') }}js/weizhi.js"></script>
        <script type="text/javascript">

            function add(){
        	    var shuz = fb2();
                $('#adbg').window({
                title: "新增",
                href: "addjq",
                width:shuz[0],
				height:shuz[1],
				top:shuz[2],
				left:shuz[3],
                minimizable:false,
                modal:true,
                closed: false,
                });
            }


            function edit(){
        	var shuz = fb2();
            var row = $('#dg4').datagrid('getSelected');
            if (row) {
                var url = '/admin/jq/wukuang/'+row.jq_id;
                $('#adbg').window({
                    title: "查看",
                    href: url,
                    width:shuz[0],
					height:shuz[1],
					top:shuz[2],
					left:shuz[3],
                    minimizable:false,
                    modal:true,
                    closed: false,
                });
            }else {
                $.messager.alert('提示','请选中要查看的行！');
            }
          }


          function cancel(){
            var row = $('#dg4').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog({
                    title: "注销",
                    closed: false,
                    modal:true,
                    top:($(window).height() - 200) * 0.5,
                    left:($(window).width() - 400) * 0.5,
                    buttons: [{
                        text: '确定',
                        iconCls: 'icon-ok',
                        handler: zhuxiao
                    }, {
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function () {
                            $('#dlg').dialog('close');
                        }
                    }]
                });
            } else {
                $.messager.alert('提示','请选中要删除的行！');
            }
        }

        function zhuxiao(){
            $('#dlg').dialog('close');
            var row = $('#dg4').datagrid('getSelected');
            var url = 'del/'+row.jq_id;
            $.ajax({
                type: 'get',
                url: url,
                success: function(data){
                    if(data.status == 1){
                        $.messager.alert('信息提示',data.msg,'info');
                      
                        var rowIndex = $('#dg4').datagrid('getRowIndex', row);
                        $('#dg4').datagrid('deleteRow', rowIndex);
                    }else{
                        $.messager.alert('信息提示',data.msg,'info');
                    }
                }
            });
        }


        $("#dg4").datagrid({
            onDblClickRow: function (index, row) {
                edit();
            }
        });


        </script>

    <script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>

    <script type="text/javascript">
        var daTa ;


        //重点部位数量统计
        var zdbwshul = echarts.init(document.getElementById('zdbwshul'));
        zdbwshul_fn();
        function zdbwshul_fn(id){
            var created_at =$("input[name='created_at']").val();
            var unit_name = $("input[name='unit_name']").val();
            var police_cl = $("select[name='police_cl']").val();
            var chuli_time = $("select[name='chuli_time']").val();
            var sbren = $("input[name='sbren']").val();
            $.ajax({
                type:"POST",
                url:"{{url('admin/bigapi/getjqsb')}}",
                async:true,
                data: {'id':id,'unit_name':unit_name,'created_at':created_at,'police_cl':police_cl,'chuli_time':chuli_time,'sbren':sbren, '_token':'{{csrf_token()}}'},
                dateType: 'json',
                success : function(data){
                    var obj = {};
                    var obj = jQuery.parseJSON(data);
                    /* if(obj.city.length == 0){
                     zdbwshul.clear();
                     }else{
                     tubiao5(obj.city)
                     }*/
                    daTa = obj.city;
                }

            });
        }

        $("#tjt").click(function(){
            var id = $("input[name='map_id']").val();
            zdbwshul_fn(id) ;   //统计图数据
            console.log(id);
            $('#shili_tb1').window({
                title: "统计图",
                width:'900',
                height:'600',
                top:($(window).height() - 600) * 0.5,
                left:($(window).width() - 900) * 0.5,
                modal: true,
                closed: false,
                minimizable:false
            });
            zdbwshul.clear();
            setTimeout(function(){
                tubiao2(daTa);
            },200)
        })

        $("#bzt").click(function(){
            zdbwshul.clear();
            setTimeout(function(){
                tubiao1(daTa);
            },500)

        })

        $("#zzt").click(function(){
            zdbwshul.clear();
            setTimeout(function(){
                tubiao2(daTa);
            },500)

        })
        $("#zxt").click(function(){
            zdbwshul.clear();
            setTimeout(function(){
                tubiao3(daTa);
            },500)

        })

        function tubiao1(datas){

            zdbwshul_option = {
                backgroundColor: '',
                title: {
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [
                    {
                        name:'警情上报数量',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '50%'],
                        data:datas,
                        roseType: 'radius',
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: '#000'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        color: ['#1b56ea','#f24949', '#4ddade'],
                        itemStyle: {
                            normal: {
                                color: '',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            }

// 使用刚指定的配置项和数据显示图表。
            zdbwshul.setOption(zdbwshul_option);
        }


        function tubiao2_jian(data){
            var data1 = [];
            for(var i = 0;i<data.length;i++){
                data1.push(data[i].name);
            }
            return data1;
        }
        function tubiao2_jian1(data){
            var data2 = [];
            for(var i = 0;i<data.length;i++){
                data2.push(data[i].value);
            }
            return data2;
        }
        function tubiao2(data){
            zdbwshul_option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : tubiao2_jian(data),
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        },
                    }
                ],
                series : [
                    {
                        name:'警情上报数量',
                        type:'bar',
                        barWidth: '20%',
                        data:tubiao2_jian1(data),
                        itemStyle:{
                            normal:{
                                color:'#e84022'
                            }
                        }
                    }
                ]
            };

// 使用刚指定的配置项和数据显示图表。
            zdbwshul.setOption(zdbwshul_option);
        }

        function tubiao3_jian(data){
            var data1 = [];
            for(var i = 0;i<data.length;i++){
                data1.push(data[i].name);
            }
            return data1;
        }
        function tubiao3_jian1(data){
            var data2 = [];
            for(var i = 0;i<data.length;i++){
                data2.push(data[i].value);
            }
            return data2;
        }
        function tubiao3(data){
            zdbwshul_option = {

                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'transparent'
                        }
                    }
                },
                legend: {
                    data:['警情上报数量'],
                    textStyle:{    //图例文字的样式
                        color:'#fff',
                    }
                },
                toolbox: {
                    show:false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'value',
                        boundaryGap : false,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : tubiao3_jian(data),
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'警情上报数量',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:tubiao3_jian1(data)
                    },



                ]
            };

// 使用刚指定的配置项和数据显示图表。
            zdbwshul.setOption(zdbwshul_option);
        }

    </script>


@stop
